<template>
    <el-container style="width: 100%; height: 100%">
        <el-header style="background-color: #000000">
            <span style="color: #409EFF; font-size: 48px"><i class="el-icon-menu"></i> 群控系统 V 0.0.1</span>
        </el-header>
        <el-container>
            <el-aside width="300px" style="background-color: #303133"> 
                <el-tree :data="devices" style="background-color: #303133" @node-click="doTreeNodeClick"  node-key="label" highlight-current>
                    <div slot-scope="{ node, data }"  style="width:100%;line-height: 30px">
                        <span style="color: #2db7f5">{{ node.label }}</span>
                        <!-- <el-row>
                            <el-col :span="18">{{ node.label }}</el-col>
                              <el-col :span="6">
                                  <el-button type="text"   
                                     size="mini" icon="el-icon-caret-right" title="启动操作"></el-button>
                          <el-button
                                  type="text"   
                                  size="mini" icon="el-icon-edit" title="编辑信息"> 
                          </el-button>
                              </el-col>
                        </el-row> --> 
                      </div>
                </el-tree>
            </el-aside>
            <el-main style="background-color: #f8f8f9">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card shadow="hover">
                           <p slot="header">当前手机：{{currentDevice && currentDevice.label}}</p>
                            <div>
                                <img v-if="currentImg != null" :src="'../../'+ currentImg" width="400" height="700"/>
                                <img v-else src="../assets/logo.png"  width="400" height="700"/>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <!-- {{user}} {{version}} -->
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import {mapState,mapGetters ,mapMutations,mapActions} from 'vuex';
    export default {
        name: 'landing-page',
        components: {},
        data() {
            return { 
               
            };
        },
        computed:{
            ...mapState({
                devices:(state)=> state.app.devices,
                currentDevice:(state) => state.app.currentDevice,
                currentImg:(state) => state.app.currentImg
            }),
            ...mapGetters({ 
            })
        },
        created(){
        
        },
        methods: {
            ...mapMutations({ 
                doTreeNodeClick: "app/changeCurrentPhone"
            }),
            ...mapActions({ 
            }),
            open (link) {
                this.$electron.shell.openExternal(link)
            },
            
        }
    }
</script>

<style>

    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: 'Source Sans Pro', sans-serif;
    }

    #wrapper {
        background: radial-gradient(
                ellipse at top left,
                rgba(255, 255, 255, 1) 40%,
                rgba(229, 229, 229, .9) 100%
        );
        height: 100vh;
        padding: 60px 80px;
        width: 100vw;
    }

    #logo {
        height: auto;
        margin-bottom: 20px;
        width: 420px;
    }

    main {
        display: flex;
        justify-content: space-between;
    }

    main > div {
        flex-basis: 50%;
    }

    .left-side {
        display: flex;
        flex-direction: column;
    }

    .welcome {
        color: #555;
        font-size: 23px;
        margin-bottom: 10px;
    }

    .title {
        color: #2c3e50;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 6px;
    }

    .title.alt {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .doc p {
        color: black;
        margin-bottom: 10px;
    }

    .doc button {
        font-size: .8em;
        cursor: pointer;
        outline: none;
        padding: 0.75em 2em;
        border-radius: 2em;
        display: inline-block;
        color: #fff;
        background-color: #4fc08d;
        transition: all 0.15s ease;
        box-sizing: border-box;
        border: 1px solid #4fc08d;
    }

    .doc button.alt {
        color: #42b983;
        background-color: transparent;
    }
</style>
